<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单页</title>
    <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/order.css">
</head>

<body>
    <!-- 创建布局容器 -->
    <div class="container-fluid">
        <!-- 使用栅格，创建行列 -->
        <div class="row">
            <!-- 左边菜单 -->
            <div class="col-md-2 main-left">
                <img class="logo" src="./images/user.jpg" alt="">
                <!-- ul li是块级元素，自动换行 -->
                <ul>
                    <li>
                        <a href="">
                            <!-- 应该是点击图标部分也能跳转，所以span图标也要放在a标签里面 -->
                            <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
                            首页</a>
                    </li>
                    <li>
                        <a href="">
                            <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
                            订单</a>
                    </li>
                    <li>
                        <a href="">
                            <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                            用户</a>
                    </li>
                </ul>
                <!-- 
                <a href="">首页</a>
                <a href="">订单</a>
                <a href="">用户</a>
                <a href="">设置</a> -->


            </div>
            <!-- 右边内容 -->
            <div class="col-md-10 main-right">
                <!-- 路径导航 -->
                <ol class="breadcrumb">
                    <li><a href="/index.html">首页</a></li>
                    <li class="active">订单页</li>
                </ol>

                <!-- 数据概览的展示 - 示例数据 -->
                <div class="row data-show">
                    <div class="col-md-3 show-item">
                        <div class="num">500</div>
                        <div>今日订单量</div>
                    </div>
                    <div class="col-md-3 show-item">
                        <div class="num">1500</div>
                        <div>当月订单量</div>
                    </div>
                    <div class="col-md-3 show-item">
                        <div class="num">5000</div>
                        <div>总销售额</div>
                    </div>
                    <div class="col-md-3 show-item">
                        <div class="num">20000</div>
                        <div>当月销售额</div>
                    </div>
                </div>


                <!-- 搜索 -->
                <div class="form-group search-box">
                    <label for="order">订单查询:</label>
                    <input type="email" class="form-control " id="order" placeholder="请输入订单编号">
                    <button type="button" class="btn btn-info" onclick="getOrderList(1)">查询</button>
                </div>

                <!-- 数据列表-表格 -->
                <h4>订单列表</h4>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>订单编号</th>
                            <th>下单时间</th>
                            <!-- <th>下单客户</th>
                            <th>商品名字</th> -->
                            <th>公司名字</th>
                            <th>订单地址</th>
                            <th>总价</th>
                            <th>操作</th>

                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                                <button type="button" class="btn btn-info btn-sm" onclick="goDetail(1)">查看详情</button>
                                <button type="button" class="btn btn-warning btn-sm" data-target="myModal">修改</button>
                                <button type="button" class="btn btn-danger btn-sm">删除</button>
                            </td>

                        </tr>
                    </tbody>
                </table>


                <!-- 分页 -->
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <!-- <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li> -->
                        <!-- <li><a href="#" onclick="getFruitListByPage(1)">1</a></li>
                        <li><a href="#" onclick="getFruitListByPage(2)">2</a></li>
                        <li><a href="#" onclick="getFruitListByPage(3)">3</a></li>
                        <li><a href="#">4</a></li> -->
                        <!-- <li><a href="#">5</a></li> -->
                        <!-- <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li> -->
                    </ul>
                </nav>


                <!-- 其他模块 - 可根据实际需求调整或移除 -->
                <div class="row other">
                    <div class="col-md-6 ">
                        <h5>最近订单</h5>
                        <ul class="list-group">
                            <li class="list-group-item">#123456 - 苹果 x5 - ¥30.00</li>
                            <li class="list-group-item">#123457 - 香蕉 x10 - ¥20.00</li>
                        </ul>
                    </div>
                    <div class="col-md-6 ">
                        <h5>订单统计</h5>
                        <ul class="list-group">
                            <li class="list-group-item">本月订单量：1500</li>
                            <li class="list-group-item">本月销售额：¥20,000</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 11 修改的弹窗 ——模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">订单信息</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="orderNo">订单编号</label>
                        <input type="text" class="form-control" id="orderNo" placeholder="请输入订单编号" disabled>
                    </div>
                    <div class="form-group">
                        <label for="createTime">下单时间</label>
                        <input type="text" class="form-control" id="createTime" placeholder="请输入下单时间" disabled>
                    </div>
                    <div class="form-group">
                        <label for="companyName">公司名字</label>
                        <input type="text" class="form-control" id="companyName" placeholder="请输入公司名字">
                    </div>
                    <div class="form-group">
                        <label for="orderPlace">订单地址</label>
                        <input type="text" class="form-control" id="orderPlace" placeholder="请输入订单地址">
                    </div>
                    <div class="form-group">
                        <label for="orderTotalAccount">总价</label>
                        <input type="text" class="form-control" id="orderTotalAccount" placeholder="请输入总价" disabled>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="confirmUpdate()">Save changes</button>
                </div>
            </div>
        </div>
    </div>



    <script src="./lib/jquery-3.6.1.min.js"></script>
    <script src="./lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="./js/order.js"></script>
    <script>


    </script>
</body>

</html>